<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Qt4 widgets II</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, Qt4 library, C++">
<meta name="description" content="In this part of the Qt4 tutorial, we continue
covering Qt4 widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5536206-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Qt4 Widgets II</h1>

<p>
In this part of the Qt4 C++ programming tutorial, we will continue 
talking about the Qt4 widgets. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>QCheckBox</h2>

<p>
The <code>QCheckBox</code> is a widget that has two states. On and Off. 
It is a box with a label.  If the checkbox is checked, it is represented 
by a tick in a box.
</p>

<p>
In our example, we display a checkbox on the window. If the checkbox is checked, 
the title of the window is displayed. Otherwise it is hidden.
</p>

<div class="codehead">checkbox.h</div>
<pre class="code">
#ifndef CHECKBOX_H
#define CHECKBOX_H

#include &lt;QWidget&gt;

class CheckBox : public QWidget
{
  Q_OBJECT

  public:
    CheckBox(QWidget *parent = 0);

  private slots:
    void showTitle(int);

};

#endif
</pre>

<p>
This is a header file for our code example.
</p>

<div class="codehead">checkbox.cpp</div>
<pre class="code">
#include "checkbox.h"
#include &lt;QCheckBox&gt;


CheckBox::CheckBox(QWidget *parent)
    : QWidget(parent)
{
  QCheckBox *cb = new QCheckBox("Show Title", this);
  cb->setCheckState(Qt::Checked);
  cb->move(50, 50);

  connect(cb, SIGNAL(stateChanged(int)), this, SLOT(showTitle(int)));
}

void CheckBox::showTitle(int state)
{
  if (state == Qt::Checked) {
    setWindowTitle("QCheckBox");
  } else {
    setWindowTitle("");
  }
}
</pre>

<p>
We display a checkbox on the window and connect it to the 
<code>showTitle()</code> slot.
</p>


<pre class="explanation">
cb->setCheckState(Qt::Checked);
</pre>

<p>
The checkbox is checked, when the example starts. 
</p>


<pre class="explanation">
void CheckBox::showTitle(int state)
{
  if (state == Qt::Checked) {
    setWindowTitle("QCheckBox");
  } else {
    setWindowTitle("");
  }
}
</pre>

<p>
We determine the state of the check box and call the <code>setWindowTitle()</code>
accordingly. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "checkbox.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  CheckBox window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("QCheckBox");
  window.show();

  return app.exec();
}
</pre>

<p>
The main file.
</p>

<img src="/img/gui/qt4/checkbox.png" alt="QCheckBox">
<div class="figure">Figure: QCheckBox</div>


<h2>QListWidget</h2>

<p>
A <code>QListWidget</code> is a widget that is used to display a 
list of items. In our example, we will demonstrate how to add, 
rename and remove items from the list widget. 
</p>

<div class="codehead">listwidget.h</div>
<pre class="code">
#ifndef LISTWIDGET_H
#define LISTWIDGET_H

#include &lt;QWidget&gt;
#include &lt;QPushButton&gt;
#include &lt;QListWidget&gt;

class ListWidget : public QWidget
{
  Q_OBJECT

  public:
    ListWidget(QWidget *parent = 0);

  private slots:
    void addItem();
    void renameItem();
    void removeItem();
    void clearItems();

  private:
    QListWidget *lw;
    QPushButton *add;
    QPushButton *rename;
    QPushButton *remove;
    QPushButton *removeAll;
 
};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">listwidget.cpp</div>
<pre class="code">
#include "listwidget.h"
#include &lt;QVBoxLayout&gt;
#include &lt;QInputDialog&gt;


ListWidget::ListWidget(QWidget *parent)
    : QWidget(parent)
{
  QVBoxLayout *vbox = new QVBoxLayout();
  vbox->setSpacing(10);

  QHBoxLayout *hbox = new QHBoxLayout(this);

  lw = new QListWidget(this);
  lw->addItem("The Omen"); 
  lw->addItem("The Exorcist");
  lw->addItem("Notes on a scandal");
  lw->addItem("Fargo");
  lw->addItem("Capote");

  add = new QPushButton("Add", this);
  rename = new QPushButton("Rename", this);
  remove = new QPushButton("Remove", this);
  removeAll = new QPushButton("Remove All", this);

  vbox->setSpacing(3);
  vbox->addStretch(1);
  vbox->addWidget(add);
  vbox->addWidget(rename);
  vbox->addWidget(remove);
  vbox->addWidget(removeAll);
  vbox->addStretch(1);

  hbox->addWidget(lw);
  hbox->addSpacing(15);
  hbox->addLayout(vbox);

  connect(add, SIGNAL(clicked()), this, SLOT(addItem()));
  connect(rename, SIGNAL(clicked()), this, SLOT(renameItem()));
  connect(remove, SIGNAL(clicked()), this, SLOT(removeItem()));
  connect(removeAll, SIGNAL(clicked()), this, SLOT(clearItems()));

  setLayout(hbox);
}

void ListWidget::addItem()
{
  QString item = QInputDialog::getText(this, "Item",
         "Enter new item");
  item = item.simplified();
  if (!item.isEmpty()) {
    lw->addItem(item);
    int r = lw->count() - 1;
    lw->setCurrentRow(r);
  }
}

void ListWidget::renameItem()
{
  QListWidgetItem *curitem = lw->currentItem();
  int r = lw->row(curitem);
  QString text = curitem->text();
  QString item = QInputDialog::getText(this, "Item", 
             "Enter new item", QLineEdit::Normal, text);

  item = item.simplified();

  if (!item.isEmpty()) {
    lw->takeItem(r);
    delete curitem;
    lw->insertItem(r, item);
    lw->setCurrentRow(r);
  }
}

void ListWidget::removeItem()
{
  QListWidgetItem *item = lw->currentItem();

  if (item) {
    int r = lw->row(item);
    lw->takeItem(r);
    delete item;
  }
}

void ListWidget::clearItems()
{
  if (lw->count() != 0)
    lw->clear();
}
</pre>

<p>
We display a list widget and four buttons. We will use these buttons 
to add, rename and remove items from the list widget.
</p>

<pre class="explanation">
lw = new QListWidget(this);
lw->addItem("The Omen"); 
lw->addItem("The Exorcist");
lw->addItem("Notes on a scandal");
lw->addItem("Fargo");
lw->addItem("Capote);
</pre>

<p>
The <code>QListWidget</code> is created and filled with five items. 
</p>

<pre class="explanation">
void ListWidget::addItem()
{
  QString item = QInputDialog::getText(this, "Item",
         "Enter new item");
  item = item.simplified();
  if (!item.isEmpty()) {
    lw->addItem(item);
    int r = lw->count() - 1;
    lw->setCurrentRow(r);
  }
}
</pre>

<p>
The <code>addItem()</code> method adds a new item to the list widget. 
The method pops up a dialog. The dialog returns a string value. We remove 
possible white spaces from the string using
the <code>simplified()</code> method. If the returned string is 
not empty, we add it to the list widget. 
Finally, we highlight the currently inserted item.  
</p>

<pre class="explanation">
void ListWidget::renameItem()
{
  QListWidgetItem *curitem = lw->currentItem();
  int r = lw->row(curitem);
  QString text = curitem->text();
  QString item = QInputDialog::getText(this, "Item", 
             "Enter new item", QLineEdit::Normal, text);

  item = item.simplified();

  if (!item.isEmpty()) {
    lw->takeItem(r);
    delete curitem;
    lw->insertItem(r, item);
    lw->setCurrentRow(r);
  }
}
</pre>

<p>
Renaming an item consists of several steps. First we get the current item
using the <code>currentItem()</code> method. We get the text of the 
item and the row, where the item is located. The text of the item
is displayed in the <code>QInputDialog</code> dialog. The string that
is returned from the dialog is processed by the <code>simplified()</code> method
to remove potential white spaces. Then we remove the old item with
the <code>takeItem()</code> method and replace it with the <code>insertItem()</code>
method. Finally, the <code>setCurrentRow()</code> selects the new item.
</p>

<pre class="explanation">
void ListWidget::removeItem()
{
 QListWidgetItem *item = lw->currentItem();

 if (item) {
   int r = lw->row(item);
   lw->takeItem(r);
   delete item;
 }
}
</pre>

<p>
The <code>removeItem()</code> removes a specific item from the list. 
First, we get the currently selected <code>QListWidgetItem</code>. 
We determine the current row and remove the item using the <code>takeItem()</code> 
method. Notice that we manually delete the <code>QListWidgetItem</code>.
</p>

<pre class="explanation">
void ListWidget::clearItems()
{
  if (lw->count() != 0)
    lw->clear();
}
</pre>

<p>
The <code>clear()</code> method removes all items from the 
list widget. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "listwidget.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  ListWidget window;

  window.move(300, 300);
  window.setWindowTitle("QListWidget");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/listwidget.png" alt="QListWidget">
<div class="figure">Figure: QListWidget</div>



<h2>QPixmap</h2>

<p>
<code>QPixmap</code> is one of the widgets used to work 
with images. It is optimized for showing images on screen.
In our code example, we will use <code>QPixmap</code> to 
display an image on the window. 
</p>

<div class="codehead">pixmap.h</div>
<pre class="code">
#ifndef PIXMAP_H
#define PIXMAP_H

#include &lt;QWidget&gt;

class Pixmap : public QWidget
{
  public:
    Pixmap(QWidget *parent = 0);
 
};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">pixmap.cpp</div>
<pre class="code">
#include "pixmap.h"
#include &lt;QPixmap&gt;
#include &lt;QLabel&gt;
#include &lt;QHBoxLayout&gt;

Pixmap::Pixmap(QWidget *parent)
    : QWidget(parent)
{
  QHBoxLayout *hbox = new QHBoxLayout(this);

  QPixmap pixmap("bojnice.jpg");

  QLabel *label = new QLabel(this);
  label->setPixmap(pixmap);

  hbox->addWidget(label);
  setLayout(hbox);
}
</pre>

<p>
We show an image of a famous castle located in middle Slovakia. 
</p>

<pre class="explanation">
QPixmap pixmap("bojnice.jpg");

QLabel *label = new QLabel(this);
label->setPixmap(pixmap);
</pre>

<p>
We create a pixmap and put it inside a label widget. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "pixmap.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Pixmap window;

  window.move(300, 300);
  window.setWindowTitle("QPixmap");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file.
</p>


<h2>QSplitter</h2>

<p>
<code>QSplitter</code> lets the user control the size of child 
widgets by dragging the boundary between the children.
In our example, we show three <code>QFrame</code> widgets 
organized with two splitters.
</p>

<div class="codehead">splitter.h</div>
<pre class="code">
#ifndef SPLITTER_H
#define SPLITTER_H

#include &lt;QWidget&gt;

class Splitter : public QWidget
{
  public:
    Splitter(QWidget *parent = 0);
 
};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">splitter.cpp</div>
<pre class="code">
#include "splitter.h"
#include &lt;QFrame&gt;
#include &lt;QSplitter&gt;
#include &lt;QHBoxLayout&gt;


Splitter::Splitter(QWidget *parent)
    : QWidget(parent)
{
  QHBoxLayout *hbox = new QHBoxLayout(this);

  QFrame *topleft = new QFrame(this);
  topleft->setFrameShape(QFrame::StyledPanel);

  QFrame *topright = new QFrame(this);
  topright->setFrameShape(QFrame::StyledPanel);

  QSplitter *splitter1 = new QSplitter(Qt::Horizontal, this);
  splitter1->addWidget(topleft);
  splitter1->addWidget(topright);

  QFrame *bottom = new QFrame(this);
  bottom->setFrameShape(QFrame::StyledPanel);

  QSplitter *splitter2 = new QSplitter(Qt::Vertical, this);
  splitter2->addWidget(splitter1);
  splitter2->addWidget(bottom);

  hbox->addWidget(splitter2);
  setLayout(hbox);
}
</pre>

<p>
We have three frame widgets and two splitter widgets. 
</p>

<pre class="explanation">
QSplitter *splitter1 = new QSplitter(Qt::Horizontal, this);
splitter1->addWidget(topleft);
splitter1->addWidget(topright);
</pre>

<p>
We create a splitter widget and add two frame widgets into the splitter. 
</p>

<pre class="explanation">
QSplitter *splitter2 = new QSplitter(Qt::Vertical, this);
splitter2->addWidget(splitter1);
</pre>

<p>
We can also add splitter to another splitter widget. 
</p>


<div class="codehead">main.cpp</div>
<pre class="code">
#include "pixmap.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Pixmap window;

  window.move(300, 300);
  window.setWindowTitle("QPixmap");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/splitter.png" alt="QSplitter">
<div class="figure">Figure: QSplitter</div>

<p>
In some desktop themes the splitter might not be visible very 
well.
</p>


<h2>QTableWidget</h2>

<p>
<code>QTableWidget</code> is a unique widget used in 
spreadsheet applications. It is also called a grid widget sometimes. 
It is one of the more complicated widgets. Here we only display 
the widget on the window. 
</p>

<div class="codehead">table.h</div>
<pre class="code">
#ifndef TABLE_H
#define TABLE_H

#include &lt;QWidget&gt;

class Table : public QWidget
{
  public:
    Table(QWidget *parent = 0);
 
};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">table.cpp</div>
<pre class="code">
#include "table.h"
#include &lt;QHBoxLayout&gt;
#include &lt;QTableWidget&gt;

Table::Table(QWidget *parent)
    : QWidget(parent)
{
  QHBoxLayout *hbox = new QHBoxLayout(this);

  QTableWidget *table = new QTableWidget(25, 25, this);

  hbox->addWidget(table);
  setLayout(hbox);
}
</pre>

<pre class="explanation">
 QTableWidget *table = new QTableWidget(25, 25, this);
</pre>

<p>
Here we create the table widget with 25 rows and 25 columns.
</p>


<div class="codehead">main.cpp</div>
<pre class="code">
#include "table.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Table window;

  window.move(300, 300);
  window.setWindowTitle("QTableWidget");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/tablewidget.png" alt="QTableWidget">
<div class="figure">Figure: QTableWidget</div>

<p>
In this chapter, we have described several other Qt4 widgets.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 26, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

